<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>哈尔滨移动服务大厅</title>
    <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 导航切换逻辑
            $('.nav-item').click(function() {
                // 移除所有激活状态
                $('.nav-item').removeClass('active');
                // 设置当前激活
                $(this).addClass('active');
                
                // 加载内容
                const targetId = $(this).data('target');
                loadContent(targetId);
            });

            // 初始化加载第一个区块
            loadContent('#bill');

            // 加载内容函数
            function loadContent(targetId) {
                // 隐藏所有区块
                $('.function-block').removeClass('active');
                
                // 显示加载状态
                $(targetId).html('<div class="loader"></div>').addClass('active');

                // 模拟不同接口请求
                let url = '';
                switch(targetId) {
                    case '#bill':
                        url = '/api/bill';
                        break;
                    case '#package':
                        url = '/api/package';
                        break;
                    case '#change':
                        url = '/api/change';
                        break;
                    case '#cancel':
                        url = '/api/cancel';
                        break;
                }

                // 发送请求（实际开发需处理错误）
                if(url) {
                    $.ajax({
                        url: url,
                        success: function(data) {
                            // 这里应根据实际数据结构处理
                           
                        },
                        error: function() {
                            $(targetId).html('<div class="error">数据加载失败，请稍后重试</div>');
                        }
                    });
                }
            }
        })
               
    </script>
    <style>
        /* 冰城主题配色 */
        :root {
            --primary-blue: #1a4d8c;
            --secondary-blue: #2b6cb0;
            --accent-ice: #e3f2fd;
        }

        /* 整体布局 */
        body {
            margin: 0;
            background: linear-gradient(135deg, #f0f6fc 0%, #d4e3fc 100%);
            min-height: 100vh;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        /* 顶部冰晶效果导航头 */
        .header {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
            color: white;
            padding: 1.5rem 2rem;
            box-shadow: 0 4px 15px rgba(26,77,140,0.2);
            display: flex;
            align-items: center;
        }

        .logo {
            width: 50px;
            margin-right: 20px;
            filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
        }

        .title {
            font-size: 2rem;
            letter-spacing: 2px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        /* 左侧冰棱效果导航栏 */
        .nav-container {
            width: 280px;
            height: calc(100vh - 80px);
            position: fixed;
            background: rgba(255,255,255,0.97);
            box-shadow: 4px 0 15px rgba(26,77,140,0.1);
            padding: 25px 0;
            border-right: 3px solid var(--accent-ice);
        }

        /* 导航项冰川效果 */
        .nav-item {
            padding: 18px 35px;
            margin: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: var(--primary-blue);
            font-size: 16px;
            position: relative;
            display: flex;
            align-items: center;
            background: linear-gradient(90deg, transparent 50%, var(--accent-ice) 150%);
        }

        .nav-item::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background: var(--secondary-blue);
            transform: scaleY(0);
            transition: transform 0.3s ease;
        }

        .nav-item:hover {
            transform: translateX(10px);
            box-shadow: 3px 3px 10px rgba(43,108,176,0.1);
            background: linear-gradient(90deg, transparent 30%, rgba(227,242,253,0.3) 100%);
        }

        .nav-item.active {
            background: linear-gradient(90deg, var(--accent-ice) 0%, white 100%);
            color: var(--primary-blue);
            font-weight: 500;
        }

        .nav-item.active::before {
            transform: scaleY(1);
        }

        /* 内容区域冰川效果 */
        .content-area {
            margin-left: 300px;
            padding: 30px;
            min-height: calc(100vh - 100px);
        }

        .function-block {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(26,77,140,0.08);
            padding: 30px;
            display: none;
            animation: slideIn 0.4s ease-out;
        }

        .function-block.active {
            display: block;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 加载动画 */
        .loader {
            width: 40px;
            height: 40px;
            border: 3px solid var(--accent-ice);
            border-top-color: var(--secondary-blue);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 顶部 -->
    <div class="header">
        <img src="mobile-logo.png" class="logo" alt="哈尔滨移动">
        <div class="title">哈尔滨移动智慧服务大厅</div>
        
    </div>
   	<a href="javascript:history.back();">返回上一页</a>
    <!-- 左侧导航 -->
    <div class="nav-container">
        <div class="nav-item active" data-target="#bill">📑 本月账单查询</div>
        <div class="nav-item" data-target="#package">📦 套餐余量查询</div>
        <div class="nav-item" data-target="#print">🖨️ 打印消费详单</div>
        <div class="nav-item" data-target="#change">🔄 套餐变更服务</div>
        <div class="nav-item" data-target="#cancel">🚪 办理退网服务</div>
    </div>

    <!-- 右侧内容区 -->
    <div class="content-area">
        <!-- 账单查询 -->
        <div id="bill" class="function-block active">
            <div class="loader"></div>
        </div>

        <!-- 套餐余量 -->
        <div id="package" class="function-block">
            <div class="loader"></div>
        </div>

        <!-- 打印服务 -->
        <div id="print" class="function-block">
            <h2>🖨️ 消费详单打印</h2>
            <div class="print-preview"></div>
            <button class="print-btn">生成PDF文件</button>
        </div>

        <!-- 套餐变更 -->
        <div id="change" class="function-block">
            <div class="loader"></div>
        </div>

        <!-- 退网服务 -->
        <div id="cancel" class="function-block">
            <div class="loader"></div>
        </div>
    </div>
</body>
</html>
